<!-- DraggableList.vue -->
<template>
	<view class="wrap">
		<view class="c-titls">
			題目組件
		</view>
		<view class="draggable-list">
			<view v-for="(item, index) in options" :key="index" class="draggable-item" draggable="true" :id='item.type'
				@dragstart="onDragStart(item)">
				<u-image :src="`/static/icon${index+1}.png`" width="32rpx" height="32rpx" shape="square" ></u-image>
				<view class="text">
					{{ item.text }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DraggableList",
		props: {
			options: {
				type: Array,
				default () {
					return [{
							text: '單選',
							type: 'radio'
						},
						{
							text: '多選',
							type: 'select',
						},
						{
							text: '圖片上傳',
							type: 'upload',
						},
						{
							text: '日期',
							type: 'date',
						},
						{
							text: '時間',
							type: 'time',
						},
						{
							text: '填空',
							type: 'input',
						},
					]
				}
			}
		},
		data() {
			return {};
		},
		methods: {
			onDragStart(component) {
				this.$emit('setCurTarget', component)
			}
		}
	};
</script>

<style lang='scss' scoped>
	.wrap{
		padding: 24rpx;
		.c-titls{
			margin-bottom: 24rpx;
		}
	}
	.draggable-list {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 24rpx;
	}

	.draggable-item {
		width: 300rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #fff;
		cursor: grab;
		padding: 12rpx;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #E7E7E7;
		display: flex;
		align-items: center;
		justify-content: center;
		.text{
			margin-left: 12rpx;
		}
	}
	::v-deep.u-image{
		margin-bottom: 44rpx;
	}
</style>